<script setup lang="ts">
  import EmojiPicker from 'vue3-emoji-picker'
  import 'vue3-emoji-picker/css'
  const emits = defineEmits(['emoji-text'])
  const visible = defineModel('visible')
  function onSelectEmoji(emoji) {
    emits('emoji-text', emoji)
  }
</script>

<template>
  <div v-if="visible" class="w-full transition-all h-auto">
    <div class="relative">
      <EmojiPicker
          class="w-full rounded-none bg-[#E5E5E5]"
          :native="true"
          mode="append"
          :offset="0"
          :theme="'auto'"
          :hide-search="true"
          :hide-group-icons="false"
          :hide-group-names="true"
          :disable-skin-tones="true"
          :disabled-groups="['flags']"
          @select="onSelectEmoji"
      ></EmojiPicker>
    </div>

  </div>
</template>

<style lang="less" scoped>
  .ql-editor .v3-footer {
    display: none;
  }
</style>
